<template>
    <div class="table">
      <div class="crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>
              <span class="container-title-p">
                运营管理
                <i class="iconfont icon-jiantou"></i>
              </span>
              <span>广告投放</span>
              </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="handle-box">
        <el-button type="success" icon="el-icon-plus" class="handle-del mr10" @click="addBanner" size="small">添加广告</el-button>

            <el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll" size="small">批量删除</el-button>
      </div>
      <el-table :data="bannerCenter" border style="width: 100%" ref="multipleTable"  @selection-change="handleSelectionChange">
          <el-table-column type="selection"></el-table-column>

          <el-table-column  label="广告标题"  align="title">
          </el-table-column>
          <el-table-column  label="广告图"  align="center">
           <template scope="scope">
            <img :src="scope.row.picture" width="80px;height:80px"/>
          </template>
          </el-table-column>
          <el-table-column  label="跳转地址" prop="refUrl" align="center">
          </el-table-column>
          <el-table-column  prop="priority"   label="排序(从大->小)" align="center"> 
          </el-table-column>

          <el-table-column label="创建时间" prop="createTime" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center" width="300">
              <template scope="scope">
                  <el-button size="small"  @click="handleDetail(scope.row)">查看</el-button>
                  <el-button size="small"  @click="handleEdit(scope.row)">编辑</el-button>
                  <el-button size="small" type="danger"  @click="handleDelete(scope.row)">删除</el-button>
              </template>
          </el-table-column>
      </el-table>
      <el-dialog
        :title="addTitle"
        style="text-align: center;"
        :visible.sync="setBannerInfo"
        width="30%"
        :center='true'
        :before-close="closeEdit">
        <el-form  label-width="70px" :model="addParams" ref="ruleForm">
          <el-form-item label="标题">
            <el-input type="input" class="input-width"  placeholder="广告标题" v-model="addParams.title" auto-complete="off" size="small"></el-input>
          </el-form-item>
          <el-form-item label="封面图">
            <el-upload
            :on-exceed='exceed'
            class="avatar-uploader" 
            name='image' 
            :action="uploadURI" 
            :http-request='upload'  
            :show-file-list="true" 
            :file-list="filelist" 
            :on-success="handleCoverSuccess"
            :limit=1
            list-type='picture-card'
            >
              <!-- <img v-if="addParams.picture" :src="addParams.picture" class="avatar" style='width:100%;'> -->
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" size="tiny">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
          <el-form-item label="跳转地址">
            <el-input type="input"  class="input-width" placeholder="跳转地址(可不填)" v-model="addParams.refUrl" auto-complete="off" size="small"></el-input>
          </el-form-item> 
          <el-form-item label="排序">
            <el-input class="input-width"  type="input" placeholder="从大到小" v-model="addParams.priority" auto-complete="off" size="small"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="default" @click="closeEdit" size="small">关闭</el-button>
          <el-button type="success" @click="saveBannerInfo(addParams.edit)" size="small">保存</el-button>
        </div>
      </el-dialog>
      <div class="pagination">
            <el-pagination
                :page-size="params.size"
                @current-change ="handleCurrentChange"
                layout="prev, pager, next"
                :total="all_page">
            </el-pagination>
        </div>
        <loading v-if="loading" :tip='tip'></loading>
        <el-dialog title="提示"
            :visible.sync='delModal'
            width='30%'
        >
        <span>您确定要删除公告吗？</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="delModal = false">取 消</el-button>
            <el-button type="primary" @click="enterDel(all)">确 定</el-button>
        </span>
        </el-dialog>

                    <!-- 查看dialog -->
                    <el-dialog title="查看广告基本信息" :visible.sync="getDetaildlog"  width="30%">
                      <detail @delModals='delModals'  :advData="advData"></detail>
                    </el-dialog>
 </div>
</template>

<script>
import * as rpConfig from '../../../../rpConfig/constant'
import { HttpReq } from '../../../service/server'
import {api,apiGet,apiPut,apiDelete} from '@/api/index';
import loading from "@/components/common/loading.vue";

import detail from '@/components/common/ADvDetail.vue';
var Server = new HttpReq()

export default {
    data() {
        return {
            filelist:[],
           addTitle:'',
            delData:{},
            ruleForm:{},
            loading:false,
            advData:{},
            all:false,
            getDetaildlog:false,
            delModal:false,
            uploadURI: 'http://118.31.10.184/api/file/base64',/*
            bannerInfo:{
                owe_banner_id:0,
                owe_banner_name:'',
                owe_banner_link:'',
                owe_banner_img:'',
                owe_banner_show_img:'',
                owe_banner_order:0
            },*/
            advert:'',
            addParams:{
              refUrl:"",
              priority:'',
              picture:'',
              title:'',
              edit:'',
              type:'0',
            },
            cur_page: 1,
            all_page: 1,
            params:{
                page:0,
                size:8,
                id:'',//公告信息标识
                type:'',//公告类型 公告类型{系统消息=0, 公告消息=1, 购买反馈=2, 提现通知=3}
                types:[],//公告类型-数组
                lastId:'',//最后标识
            },
            bannerCenter: [],
            setBannerInfo:false,
            dialogVisible: false,
            dialogImageUrl: ''
        }
    },
    created() {
      //  this.getData()
       
    },

    components: {
      loading,
      detail
    },
    computed: {},
    methods: {
        exceed(){
            this.$message({message:'文件限制一个',type:'warning'})
        },
        upload(e){
            var self=this;
            var file=e.file;
            var reader=new FileReader();
            reader.readAsDataURL(file);
            reader.onload=function(){
                var params={
                    data:this.result,
                    filename:file.name
                }
                api.file.fileImg(params).then(res=>{
                    // //console.log(res);
                    self.addParams.picture =res.url;

                    // self.filelist.push(res);
                })
                // //console.log(self.filelist)
            }
        },
      warning(msg){
            this.$message({message:msg ,type: 'warning'});
        },
      handleClose(){
            this.setBannerInfo=false;
            this.addParams={//模态框内容置空
              refUrl:"",
              priority:'',
              picture:'',
              title:'',
            }
        }, 
        
        delModals(){
          this.getDetaildlog = false;
        },
        handleCurrentChange(val) {
            this.cur_page = val
            this.params.page=val-1;
            this.getList();
        },
        handleCoverSuccess(res) {
          //console.log(res,'res')
            if (res.code != 200) {
                this.$message.error(res.msg)
            } else {
                this.addParams.picture = res.data.url
                this.addParams.refUrl = res.data.saveUrl
            }
        },
        /*getData() {
          //console.log(123 )
            api.file.fileList(this.fileParams).then(res=>{
                //console.log(res);
                this.$message({message:'操作成功',type:'success'})
            })
        },
    */

        closeEdit() {
            this.setBannerInfo = false;
            this.filelist=[];
            this.addParams={
                refUrl:"",
                priority:'',
                picture:'',
                title:'',
                edit:'',
                type:'0',
            }
        },

        saveBannerInfo(type) {
          //console.log(type,'33')
          this.loading=true;
            if(type=='edit'){
                this.tip='提交广告编辑';
                apiPut.advert.advertList(this.editId,this.addParams).then(res=>{
                //console.log(res);
                this.loading=false;
                this.getList();
                this.$message({message:'操作成功',type:'success'})
                
                this.setBannerInfo = false
                this.addParams={//模态框内容置空
                    refUrl:"",
                    priority:'',
                    picture:'',
                    title:'',
                }
            })
            }else{
                this.tip="添加广告";
                api.advert.advertList(this.addParams).then(res=>{
                //console.log(res);
                this.loading=false;
                this.$message({message:'操作成功',type:'success'})
                this.getList();
                this.setBannerInfo = false
                this.addParams={//模态框内容置空
                    refUrl:"",
                    priority:'',
                    picture:'',
                    title:'',
                }
            })
            }  
            
        },
        handleDetail(detail){
          //console.log(detail)
          this.advData = detail;
          this.getDetaildlog=true;
        },
        handleEdit(row) {
          //console.log(row,'234')
          this.filelist=[];
            this.addParams.edit='edit';
            this.addTitle='编辑广告';
            this.editId=row.id;
            this.tip='获取广告详情';
            this.loading=true;
            apiGet.advert.advertList({},true,this.editId).then(res=>{
                //console.log(res,1234);
                this.setBannerInfo=true;
                this.addParams.refUrl=res.refUrl;
                this.addParams.type=res.type;
                this.filelist.push({name:res.title,url:res.picture})
                this.addParams.title=res.title;
                this.addParams.picture=res.picture;
                this.addParams.priority=res.priority;
                this.loading=false;
            })
        },
        addBanner(){
            this.filelist=[];
            this.addParams.edit='add';
            this.setBannerInfo=true 
        },
        handleDelete(row) {
            let self = this
            this.delData=row;
            this.delModal=true;
        },
        enterDel(all){
            if(all){
                this.multipleSelection.forEach((item,i)=>{
                    this.loading=true;
                    this.tip='删除中';
                    apiDelete.advert.advertList(item.id,{}).then(res=>{
                        // //console.log(res);
                        this.loading=false;
                        // this.$message({message:'操作成功',mock:''});
                        this.getList();
                    })
                    this.delModal=false;
                })
            }else{
                this.loading=true;
                this.tip='删除公告中';
                apiDelete.advert.advertList(this.delData.id,{}).then(res=>{
                    //console.log(res);
                    this.loading=false;
                    this.delModal=false;
                    this.$message({message:'操作成功',mock:''});
                    this.getList();
                })
            }
        },
        delAll() {
            this.all=true;
            if(this.multipleSelection.length){
                this.delModal=true;
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        getList(){
            this.tip='获取广告列表'
            this.loading=true;
            apiGet.advert.advertList(this.params).then(res=>{
                //console.log(res);
                this.loading=false;
                this.all_page=res.totalElements;
                this.bannerCenter=res.content;
            })
        },
    },
    mounted () {
        this.getList();
        //console.log(this.addParams.picture)
    }
}
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}
.handle-select {
  width: 120px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
  .item {
    margin-bottom: 18px;
    cursor: pointer;
  }
  .item:hover{
      color:#44b549
  }
  .curgroup{
      color:#44b549 
  }
  .input-width{
      width:80%;
  }

</style>